import { routes } from "../../database/routes.js";
import { store1 } from "../store.js";

// 组件名称，用于模块标识
export var name = "pagecardM";

// 缓存路由解析结果，避免重复计算
const routeTitleMap = (function () {
    const newObj = {}; // {"/":"仪表盘","/product":"商品"....}

    // 递归遍历路由，提取路径和名称
    function path2title(routeObject) {
        routeObject.forEach(function (route) {
            if (!route.children) { // 无子路由的一级路由
                newObj[route.path] = route.name;
            } else {
                path2title(route.children); // 递归处理子路由
            }
        });
    }

    path2title(routes); // 启动递归解析

    return newObj;
})();

/**
 * 渲染组件的 HTML 结构（含样式）
 * @returns {string} 组件的 HTML 字符串
 */
export function render() {
    return `
        <style>
            ul {
                padding: 0;
                margin: 0;
            }
            /* 卡片管理器容器样式：横向滚动布局 */
            .page-card-parent{
                width: 100%;
                height: 50px;
                position: relative;
                border-bottom:1px solid gray ;
                background-color: white;
            }
            
            .page-card-manager {
                display: inline-block;
                left: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: white;
                user-select: none;
                /*overflow: hidden;*/
            }
            
            .card-dropdown{
                display: inline-block;
                width: 10%;
                height: 100%;
                position: absolute;
                background-color: #f6f6f6;
                right: -10%;
                border-left: 1px solid #e9ecef;
                transition: all 0.3s;
            }
           .card-dropdown ul{
                text-align: center;
                border: 1px solid #e9ecef;
                border-radius: 0 0 4px 4px;
                position: absolute;
                top: 100%;
                width: 100%;     
                z-index: 100;
                background-color: white;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                display: none; /* 默认隐藏 */
                transition: all 0.3s;
            }
             .card-dropdown li{
                list-style: none;
                width: 100%;
                background-color: #f8f9fa;
                height: 40px;
                line-height: 40px;
                user-select: none;
                transition: all 0.2s;
                border-bottom: 1px solid #e9ecef;
            }
            .card-dropdown li:last-child{
                border-bottom: none;
                border-radius: 0 0 4px 4px;
            }
            .card-dropdown li:hover{
                background-color: #e9ecef;
            }
            
            /* 单个页面卡片基础样式 */
            .page-card {
                display: inline-flex;
                align-items: center;
                background: pink;
                padding: 6px 12px;
                cursor: pointer;
                height: 100%;
                transition: all 0.2s;
            }
            
            /* 卡片 hover 交互 */
            .page-card:hover {
                background: #f1f3f5;
            }
            
            /* 激活状态卡片样式 */
            .page-card.active {
                background: #f8f9fa;
            }
            
            /* 卡片标题文字样式 */
            .page-card-title {
                margin-right: 8px;
                font-size: 14px;
                color: #495057;
            }
            
            /* 关闭按钮基础样式 */
            .page-card-close {
                border: none;
                background: none;
                color: #adb5bd;
                cursor: pointer;
                font-size: 12px;
                padding: 0;
                width: 16px;
                height: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }
            
            /* 关闭按钮 hover 交互 */
            .page-card-close:hover {
                background: #f1f3f5;
                color: #dc3545;
            }
            
            /* 滚动条自定义样式 */
            .page-card-manager::-webkit-scrollbar {
                height: 4px;
            }
            .page-card-manager::-webkit-scrollbar-thumb {
                background: #adb5bd;
                border-radius: 2px;
            }
            .card-dropdown-title {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                user-select: none;
            }
            
        </style>
        
        <div class="page-card-parent">
            <ul class="page-card-manager">
                <!-- 卡片会通过 JS 动态添加到这里 -->
                <!--卡片放置区-->
            </ul>
            <div class="card-dropdown">
                 <div class="card-dropdown-title">更多卡片...</div>      
                 <ul class="list-dropdown">
                 
                 </ul>
            </div>
        </div>
    `;
}

/*
 * 组件渲染完成后执行的初始化逻辑
 * 负责绑定事件、恢复状态、处理路由联动
 */
export function afterRender() {
    // ==================== 1. 直接使用缓存的路由解析结果 ====================
    const ptObj = routeTitleMap;

    // ==================== 2. 核心 DOM 元素获取 ====================
    // 缓存 DOM 查询结果，避免重复查询
    const cardDropdown = document.querySelector(".card-dropdown");
    const dropdownUl = cardDropdown.querySelector(".card-dropdown ul");
    const manager = document.querySelector('.page-card-manager'); // 卡片容器

    // 鼠标悬停显示/隐藏下拉菜单
    cardDropdown.addEventListener('mouseenter', function() {
        dropdownUl.style.display = 'block';
    });

    cardDropdown.addEventListener('mouseleave', function() {
        dropdownUl.style.display = 'none';
    });

    // ==================== 3. 卡片操作核心函数 ====================
    /**
     * 创建并添加新卡片（默认 hash 为 "/"）
     * @param {string} hash - 路由哈希（默认值："/"）
     */
    function addNewCard(hash = "/") {
        // 2. 创建新卡片 DOM
        const card = document.createElement('li');
        card.className = 'page-card'; // 新卡片默认激活

        card.innerHTML = `
            <span class="page-card-title" style="display: inline-block;width: 100%;padding: 5px;">${ptObj[hash]}</span>
            <button class="page-card-close" data-hash="${hash}">&times;</button> 
        `;

        manager.insertBefore(card, manager.firstChild);//从左边插入

        // 获取所有的卡片
        var pageCards = manager.querySelectorAll(".page-card"); //HTMLCollection NodeList dom变或,则数组自动变化
        let pageCardTotalWidth = 0; // 卡片的总宽度

        // 计算卡片总宽度
        pageCards.forEach(cardObj => { 
            pageCardTotalWidth += cardObj.offsetWidth;
        });

        //判断卡片的总宽度是否超过了卡片容器的宽度
        while (pageCardTotalWidth > manager.offsetWidth) {
            var lastEle = manager.lastElementChild;
            if (!lastEle) break;
            manager.removeChild(lastEle);
            manager.style.width = "90%";
            cardDropdown.style.right = 0;
            lastEle.classList.remove("active");
            dropdownUl.insertBefore(lastEle, dropdownUl.firstChild);

            // 重新计算剩余卡片总宽度
            pageCardTotalWidth = 0;
            pageCards.forEach(cardObj => {
                pageCardTotalWidth += cardObj.offsetWidth;
            });

            pageCards = manager.querySelectorAll(".page-card");
        }
    }

    // ==================== 4. 初始化：从 sessionStorage 恢复卡片 ====================
    function defaultCard() {
        // 从本地存储读取卡片哈希数组（空数组兜底）
        const hash = location.hash.slice(1) || store1.state.activeMenu;
        const cardArray = JSON.parse(sessionStorage.getItem("cardItem") || "[]");

        if (cardArray.length === 0) {
            // 情况 1：本地无数据 → 初始化默认卡片（仪表盘 /）
            const initialHash = "/";

            addNewCard(initialHash);   // 创建卡片
            cardArray.push(initialHash); // 记录到数组

            // 更新本地存储
            sessionStorage.setItem("cardItem", JSON.stringify(cardArray));
        } else {
            // 情况 2：本地有数据 → 遍历恢复卡片
            cardArray.forEach(hash => {
                addNewCard(hash);
            });
        }
        
        const activeButton = manager.querySelector(`[data-hash="${hash}"]`);
        if (activeButton) {
            activeButton.parentElement.classList.add("active");
        }
    }

    defaultCard(); // 执行初始化

    // ==================== 5. 路由变化监听：新增卡片 ====================
    window.addEventListener('hashchange', function (e) {
        // 1. 获取当前路由哈希（优先取 location.hash，兜底用 store 中的激活菜单）
        var hash = location.hash.slice(1) || store1.state.activeMenu;
        // 2. 读取会话存储的卡片数组
        var cardArray = JSON.parse(sessionStorage.getItem("cardItem") || "[]");

        //去除以前的激活样式
        document.querySelector('.page-card-parent .active')?.classList.remove('active');

        // 3. 若当前哈希未在数组中 → 新增卡片并更新存储
        if (!cardArray.includes(hash) && ptObj[hash]) {
            addNewCard(hash);
            cardArray.push(hash);
            sessionStorage.setItem("cardItem", JSON.stringify(cardArray));
            manager.querySelector(`[data-hash="${hash}"]`).parentElement.classList.add("active");

        }else if(cardArray.includes(hash)){//卡片已经生成了
            //找出卡片
            var li = document.querySelector(`[data-hash="${hash}"]`).parentElement;

            li.classList.add("active");

            if(li.parentElement.classList.contains('list-dropdown')){//下拉
                //li从下拉列表中拎出来 , 放入到轨道中第一个
                //轨道中的最后一个li 放到 下拉列表的第一个
                //1.把manager中的卡片移动一张出来
                var mLatEle =  manager.lastElementChild;
                manager.removeChild(mLatEle);
                //2.把dropdownUl中移除一张
                dropdownUl.removeChild(li);
                //3.位置互换
                manager.insertBefore(li, manager.firstChild);
                dropdownUl.insertBefore(mLatEle,dropdownUl.firstChild)

                //4.数组位置执行变换 [1.获取li标签当中的data-hash 2.从url地址栏中获取]
                var clickHash = location.hash.slice(1) || "/";
                var hashArray = JSON.parse(sessionStorage.getItem("cardItem") || "[]");

                hashArray = hashArray.filter(function(h){
                    return h !== clickHash
                });

                //把hash放在数组的最后
                hashArray.push(clickHash);

                sessionStorage.setItem("cardItem", JSON.stringify(hashArray));

            }
        }




    });

    // ==================== 6. 卡片删除逻辑 ====================
    function handleCardDelete(e) {
        // 仅处理关闭按钮的点击
        if (e.target.classList.contains('page-card-close')) {
            e.stopPropagation(); // 阻止事件冒泡（避免触发激活逻辑）

            var nowHash = location.hash.slice(1) || store1.state.activeMenu;
            // 1. 获取要删除的哈希

            var hash = e.target.getAttribute('data-hash');

            // 2. 过滤掉待删除的哈希
            var hashArray = JSON.parse(sessionStorage.getItem("cardItem") || "[]");

            //当前卡片被删除,重新设置hash
            if(nowHash === hash && !e.target.parentElement.parentElement.classList.contains('list-dropdown')){
                var hashIndex = hashArray.indexOf(hash)
                if(hashArray[hashIndex+1]){//不能为空
                    location.hash = hashArray[hashIndex+1]
                }else if(hashArray[hashIndex-1]){
                    location.hash = hashArray[hashIndex-1]
                }else{//左边和右边都没有 hash 了 (卡片只有一个,一定要生成默认卡片)
                    location.hash = "/";
                    addNewCard("/");
                }


            }

            //清除sessionStorage中对应的hash
            hashArray = hashArray.filter(function(item){ return item !== hash});

            // 3. 更新本地存储
            sessionStorage.setItem("cardItem", JSON.stringify(hashArray));

            // 4. 清空容器并重新初始化（触发 defaultCrad 重新渲染剩余卡片）

            //清空轨道
            manager.innerHTML = "";
            //清空下拉列表
            dropdownUl.innerHTML = ""

            //卡片重新生成
            defaultCard();



            //检查dropdownUl中还有没有子元素,如果没有的话,则隐藏

            if(dropdownUl.children.length === 0){
                cardDropdown.style.right = "-10%";
                manager.style.width = "100%";
            }

            console.warn("handleCardDelete",manager.children);

        }
    }

    // ==================== 7. 卡片激活逻辑 ====================
    function activateCard(e) {

        e.preventDefault();
        // 如何判断点击的卡片存在于dropdownUl中
        let parentElement = null;
        let activeCard = null; //li

        if (e.target.tagName === "LI") {
            parentElement = e.target.parentElement;
            activeCard = e.target;
        } else if (e.target.tagName === "SPAN") {
            parentElement = e.target.parentElement.parentElement;
            activeCard = e.target.parentElement;
        }else{
            return;
        }

        // 1. active状态只会存在于 manager的子元素上
        const currentActiveCard = manager.querySelector(".active");
        if (currentActiveCard) {
            currentActiveCard.classList.remove('active');
        }

        // 2. 标记当前卡片为激活
        if (activeCard) {
            activeCard.classList.add('active');
        }

        // 3. 改变hash值
        if (e.target.tagName !== "BUTTON" && activeCard) {
            location.hash = activeCard.lastElementChild.getAttribute("data-hash");
        }
        // 点击dropdownUl当中的卡片换位置
        if (parentElement?.classList.contains('list-dropdown')) {
            // 1. 把manager中的卡片移动一张出来
            const mLatEle = manager.lastElementChild;
            if (mLatEle) {
                manager.removeChild(mLatEle);
                // 2. 把dropdownUl中移除一张
                dropdownUl.removeChild(activeCard);
                // 3. 位置互换
                manager.insertBefore(activeCard, manager.firstChild);
                dropdownUl.insertBefore(mLatEle, dropdownUl.firstChild);

                // 4. 数组位置执行变换 [1.获取li标签当中的data-hash 2.从url地址栏中获取]
                const clickHash = location.hash.slice(1) || "/";
                let hashArray = JSON.parse(sessionStorage.getItem("cardItem") || "[]");

                hashArray = hashArray.filter(h => h !== clickHash);

                // 把hash放在数组的最后
                hashArray.push(clickHash);

                sessionStorage.setItem("cardItem", JSON.stringify(hashArray));
            }
        }

    }

    // ==================== 9. 事件绑定 ====================
    manager.addEventListener("click", handleCardDelete);   // 卡片轨道的删除逻辑
    dropdownUl.addEventListener("click",handleCardDelete); // 下来列表的删除逻辑
    manager.addEventListener('click', activateCard);      // 绑定激活逻辑
    dropdownUl.addEventListener("click", activateCard);   //

    //====================在窗口改变大小的时候,从新计算宽度是否不足
    window.addEventListener("resize", function(e) {
        manager.innerHTML = dropdownUl.innerHTML = "";
        defaultCard();
    });


}